{% extends 'common/base.html' %}
{% import 'common/page.html' as pg %}
<link href="{{ url_for('static',filename='css/plugins/bootstrap-datetimepicker.min.css') }}" rel="stylesheet"/>
{% block css %}
    <style>
        .layui-layer-btn1 {
            border-color: #00a157;
            background-color: #00a157;
            color: #00a157;
        }
    </style>
{% endblock %}
{% block content %}
    <section class="content-header">
        <div>
            <ol class="breadcrumb">
                <li><a href="#"><i class="fa fa-dashboard"></i> 考试管理</a></li>
                <li class="active">考试列表</li>
            </ol>
        </div>
    </section>
    <section class="content" id="showcontent">
        <div class="row">
            <div class="col-md-12">
                <div class="box box-primary">
                    <div class="box-header">
                        <h3 class="box-title">考试列表</h3>
                        <div class="box-tools">
                            <a class="btn btn-primary float-right" href="{{ url_for('main.exam_add') }}"
                               style="padding: 4px 6px">添加</a>
                            <div class="float-right" style="margin-right:5px;width: 200px">
                                <form action="" method="GET">
                                    <div class="input-group input-group-sm">

                                        <input type="text" class="form-control" name="keyword"
                                               placeholder="请输入试卷名称" value="{{ keyword }}">
                                        <span class="input-group-btn">
                                             <button class="btn btn-default" type="submit"><i class="fa fa-search"></i></button>
                                        </span>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                    <div class="box-body table-responsive no-padding">
                        <table class="table table-hover">
                            <tbody>
                            <tr>
                                <th>编号</th>
                                <th>试卷名称</th>
                                <th>答题时间</th>
                                <th>开始时间</th>
                                <th>结束时间</th>
                                <th>题目数量</th>
                                <th>操作事项</th>
                            </tr>
                            {% for v in page_data.items %}
                                <tr>
                                    <td>{{ v.id }}</td>
                                    <td>{{ v.test.test_name }}</td>
                                    <td>{{ v.time }}</td>
                                    <td>{{ v.startTime }}</td>
                                    <td>{{ v.endTime }}</td>
                                    <td>{{ v.count }}</td>
                                    <td>
                                        {% if v.endTime < nowTime %}
                                            <a class="label label-default" style="pointer-events: none;"
                                               onclick="tip(1)">已结束</a>
                                            &nbsp;
                                        {% elif v.startTime > nowTime %}
                                            <a class="label label-info" style="pointer-events: none;" onclick="tip(2)">未开始</a>
                                            &nbsp;
                                        {% else %}
                                            <a id="star" class="label label-success"
                                               onclick="start({{ v.id }})">开始考试</a>
                                        {% endif %}
                                    </td>
                                </tr>
                            {% endfor %}
                            </tbody>
                        </table>
                    </div>
                    <div class="box-footer clearfix">
                        {{ pg.page(page_data,'main.test_list',keyword) }}
                    </div>
                </div>
            </div>
        </div>
    </section>
{% endblock %}
{% block js %}
    <script src="{{ url_for('static',filename='js/plugins/bootstrap-datetimepicker.min.js') }}"></script>
    <script>
        $(function () {
            var msg_ok = {{get_flashed_messages(category_filter=["ok"])|tojson}};
            if (msg_ok.length > 0 && msg_ok != "") {
                layer.open({
                    title: '成功',
                    content: msg_ok.toString(),
                    icon: 1,
                    time: 2000
                });
            }
            var msg_err = {{get_flashed_messages(category_filter=["err"])|tojson}};
            if (msg_err.length > 0 && msg_err != "") {
                layer.open({
                    title: '失败',
                    content: msg_err.toString(),
                    icon: 2,
                    time: 2000
                });
            }
        })

        function del(name) {
            return confirm("确定删除[" + name + "]?");
        }

        function tip(type) {
            var content = "";
            if (type == 1) {
                layer.msg("考试已结束啦！", {
                    icon: 0,
                    time: 2000
                });
            } else if (type == 2) {
                layer.msg("请耐心等待考试的开始！", {
                    icon: 6,
                    time: 2000
                });
            }
        }

        function start(id) {
            layer.open({
                title: '考前须知',
                content: "1.诚信考试，认真答题。<br/>2.进入考试后不可中断，否则会自动提交试卷",
                btn: ["取消", "进入考试"],
                function(index) {
                    return false;
                },
                btn2: function (index) {
                    window.location = "{{ url_for('main.paper')}}?id=" + id;
                }
            });
        }
    </script>
{% endblock %}